<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>    body {
        background-color: #F5DEB3;
        font-family: 'Noto Serif SC', serif;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        padding: 0;
        color: #333;
    }
    .Box {

        background-color: rgba(215, 189, 139, 0.99); /* 茶色背景 */
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 350px;
        overflow: hidden; /* 防止阴影超出盒子 */
    }
    h3 {
        text-align: center;
        color: #5D4037; /* 深茶色文字 */
        margin-bottom: 15px;
    }
    .desc {
        text-align: center;
        color: #777;
        font-size: 14px;
        margin-bottom: 20px;
    }
    input[type="text"],
    input[type="password"] {
        display: block;
        width: 93%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
    }
    .loginBtn {
        width: 60%;
        padding: 10px;
        background-color: #8B4513; /* 赭石色按钮 */
        border: none;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
    }
    .loginBtn:hover {
        background-color: #A0522D; /* 更深的赭石色 */
    }
    .no {
        text-align: center;
        margin-top: 20px;
    }
    .no a {
        color: #8B4513; /* 赭石色链接 */
        text-decoration: none;
    }
    .no a:hover {
        text-decoration: underline;
    }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
<body>
<body> <div class="Box">
    <form action="/keeper/login">
    <h3>登录</h3>
    <p class="desc">WELCOME LOGIN</p>
    <input type="text" placeholder="请输入用户名" required>
    <input type="password" placeholder="请输入密码" required>
        &nbsp;&nbsp; &nbsp;&nbsp;
    <input type="submit" class="loginBtn" value="立即登录"></button>
    <p class="no"> <span></span>
        <span> <a style="color: #ffffff;" href="用户注册.html">没有账号？立即注册</a> </span> </p>
    </form>
    </div>
</body>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.querySelector('form');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交

            var keeper_name = document.querySelector('input[type="text"]').value;
            var password = document.querySelector('input[type="password"]').value;
            var keeper = {
                keeper_name: keeper_name,
                password: password
            };
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/keeper/keeper/login', true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

            xhr.onload = function () {
                console.log(typeof xhr.responseText)
                if (xhr.responseText !== "0") {
                    const keeper_id=xhr.responseText;
                    localStorage.setItem('keeper_id',keeper_id);
                    window.location.href = "../pages/keeper/product/首页展示.html";
                } else {

                    alert('登录失败：' + xhr.responseText);
                }
            };

            xhr.onerror = function () {
                console.error('网络错误，请稍后再试');
                alert('网络错误，请稍后再试');
            };
            xhr.send(JSON.stringify(keeper));
        });
    });
</script>
</body>
</html>
